<template>
    <div class="app-container">
        <el-menu  :default-active="activeIndex" :active-text-color="color" class="el-menu-demo fontClass" mode="horizontal">
          <!-- logo -->
        <div class="zhanwei">  
        <router-link to="/front/wdzy">
        <i class="iconfont icon-wunsun"></i>
        <i class="iconfont icon-kuanshizhan"></i>
        </router-link>  
        </div>

        <el-menu-item index="zdyk" class="fontClass"  @click="handleMenuItemClick('/front/classPage/值得一看')">
          <router-link :to="'/front/classPage/值得一看'" class="full-width-link">值得一看</router-link>
        </el-menu-item>
        <el-menu-item index="dmzy" class="fontClass" @click="handleMenuItemClick('/front/classPage/动漫资源')">
          <router-link :to="'/front/classPage/动漫资源'" class="full-width-link">动漫资源</router-link>
        </el-menu-item>
        <el-menu-item index="ylzx" class="fontClass" @click="handleMenuItemClick('/front/classPage/娱乐资讯')">
          <router-link :to="'/front/classPage/娱乐资讯'" class="full-width-link">娱乐资讯</router-link>
        </el-menu-item>
        <el-menu-item index="dyzy" class="fontClass"  @click="handleMenuItemClick('/front/classPage/电影资源')">
          <router-link :to="'/front/classPage/电影资源'" class="full-width-link">电影资源</router-link>
        </el-menu-item>
        <el-menu-item index="dsjzy" class="fontClass" @click="handleMenuItemClick('/front/classPage/电视剧资源')">
          <router-link :to="'/front/classPage/电视剧资源'" class="full-width-link">电视剧资源</router-link>
        </el-menu-item>
        <el-submenu index="2">
        <template slot="title">
          <span class="fontClass">我的工作台</span>
        </template>
        <el-menu-item index="wallpaper" class="fontClass">
          <router-link :to="'/front/wallpaper'" class="full-width-link">标签云</router-link>
        </el-menu-item>
        <el-menu-item index="mytop" class="fontClass">
          <router-link :to="'/front/mytop'" class="full-width-link">网站统计</router-link>
        </el-menu-item>
        <el-menu-item index="mygood" class="fontClass">
          <router-link :to="'/front/mygood'" class="full-width-link">资源留言</router-link>
        </el-menu-item>
        </el-submenu>
          <i class="el-icon-search fontClass mysearch" @click="toggleItem()" ref="search">
          </i> 
        </el-menu>

        <transition name="slide">
          <div  class="collapse-body" 
                v-show="visible" 
                ref="collapseBody"  
                @click.stop  >  
          <el-row type="flex" class="Centered">
            <el-col :span="7">
              <el-input class="w-50 m-2 eit"  :style="{ borderColor: '#fcb900' }"   size="large" v-model="input" placeholder="输入关键字" @keyup.enter.native="toretrieval"/>
            </el-col>
            <el-col :span="1">
              <el-button class="bt" type="warning" size="large" plain @click="toretrieval" style="width: 100%;" >搜 索</el-button>
            </el-col>
          </el-row> 
          </div>  
        </transition>
        
      <router-view class="aaa"></router-view>
      
    </div>

</template>

<script>
// import '../../icon/iconfont.css'
import '../assets/iconfront/iconfont.css'

export default {
  data() {
    return {
      color:'#FDAC5F',
      input:'',
      visible: false ,
      activeIndex:'',
      // 总条数
      total: 0,
      // 共享资源表格数据
      resourceList: [],
      // 弹出层标题
      title: "",
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        title: null,
        likeCount: null,
        dictType: null,
        introduce: null,
        url: null,
        content: null,
        feedbackChose: null
      },
    };
  },
  created() {
  },
  mounted() {  
    document.addEventListener('click', this.handleDocumentClick);  
  },  
  beforeDestroy() {  
    document.removeEventListener('click', this.handleDocumentClick);  
  },  
  methods: {
    handleMenuItemClick(path) {  
      this.$router.push(path);  
    },
    handleDocumentClick(event) {  
      // 检查点击事件的目标是否不是 collapseBody 或其子元素  
      if (this.$refs.collapseBody && this.$refs.search && !this.$refs.collapseBody.contains(event.target)&&!this.$refs.search.contains(event.target)) {  
        this.visible = false;  
      }  
    },  
    toggleItem() {  
      // 切换指定索引的面板项的可见性  
     this.visible = !this.visible
    }, 
    toretrieval(){
      const a =this.$route.path
      if(this.input==null||this.input==''){
        const a ='/all';
        this.$router.push({name:'result',params:{title:a}});
      }else{
        this.$router.push({name:'result',params:{title:this.input}});
      }
      if(a!=this.$route.path){
         location.reload()
      }
      
    },
  }
};
</script>

<style scoped>
::v-deep .Centered .el-input__inner:focus {  
  border-color: #fcb900; 
  outline: none; 
}  
.full-width-link {  
  /* 使用样式来确保 router-link 占据整个 el-menu-item 的宽度 */  
  display: block;  
  width: 100%;  
  height: 100%;
    /* 如果 el-menu-item 有 padding，则继承它 */  
}  
/* 定义过渡效果 */  
.slide-enter-active, .slide-leave-active {  
  transition: height 0.1s;  
}
  
/* 进入过渡的开始状态 */  
.slide-enter, .slide-leave-to {  
  height: 0px;  
  overflow: hidden;  
}  
.Centered{
  width: 100%;
  align-items: center; /* 如果需要垂直居中 */ 
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}
.aaa{
  margin-top: 20px;
}
.mysearch:hover{
  font-weight:bold;
  cursor: pointer;
}
.fontClass{
  font-size: 16px;
}

.zhanwei{
  display: flex; 
  justify-content: center; 
  align-items: center; 
  height: 50px;
  width: 35%;
  /* border: 1px solid rgb(212, 212, 212); */
  margin-right: 50%;
  /* background-color: #EFEFEF; */
}
.iconfont{
  font-size: 36px;
}
.el-menu-demo{
  display: flex;  
  justify-content: flex-end; /* 将子元素对齐到容器的右侧 */  
  align-items: center; /* 如果需要垂直居中 */  
  padding: 0px 20px;
  margin: 10px 0 0px 0;
  font-size: 16px;
}
.app-container{
    padding: 0px;
}
  
.collapse-body {
  display: flex;
  position: absolute;
  width: 100%;
  height: 80px; 
  z-index: 999;
  background-color: #FFFFFF;
  opacity: 0.9;
}  
</style>